<template>

  <KPageContainer>
    <h1>{{ $tr('sectionTitle') }}</h1>
    <p>
      {{ $tr('sectionDescription') }}
    </p>
    <ul>
      <li>{{ $tr('exportCSV') }}</li>
      <li>{{ $tr('editCSV') }}</li>
      <li>{{ $tr('importCSV') }}</li>
    </ul>
    <p>
      <KButton
        appearance="basic-link"
        :text="$tr('viewFormat')"
        @click="showInfoModal = true"
      />
    </p>
    <p style="display: flex; flex-direction: column; margin-top: 24px">
      <KRouterLink
        :text="$tr('import')"
        appearance="raised-button"
        style="width: max-content; margin: 0 16px 20px 0"
        :to="$store.getters.facilityPageLinks.ImportCsvPage"
      />
      <KButton
        :text="$tr('downloadCSV')"
        appearance="raised-button"
        style="width: max-content; margin: 0 16px 20px 0"
        :disabled="!exported"
        @click="downloadCsv"
      />
      <KButton
        appearance="basic-link"
        :text="exported ? $tr('regenerateCSV') : $tr('generateCSV')"
        style="margin: 0 8px 10px 0"
        @click="exportCsv"
      />
      <DataPageTaskProgress v-if="isExporting">
        {{ $tr('generatingCSV') }}
      </DataPageTaskProgress>
    </p>

    <CsvInfoModal
      v-if="showInfoModal"
      @cancel="showInfoModal = false"
    />
  </KPageContainer>

</template>


<script>

  import urls from 'kolibri/urls';
  import { mapState, mapActions, mapGetters } from 'vuex';
  import { UsersExportStatuses } from '../../../constants';
  import DataPageTaskProgress from '../DataPageTaskProgress';
  import CsvInfoModal from '../../CsvInfoModal';

  export default {
    name: 'ImportInterface',
    components: {
      DataPageTaskProgress,
      CsvInfoModal,
    },
    data() {
      return {
        showInfoModal: false,
      };
    },
    computed: {
      ...mapGetters('manageCSV', ['exported']),
      ...mapState('manageCSV', ['exportUsersStatus']),
      isExporting() {
        return this.exportUsersStatus === UsersExportStatuses.EXPORTING;
      },
    },
    methods: {
      ...mapActions('manageCSV', ['startExportUsers']),
      exportCsv() {
        this.startExportUsers();
      },
      downloadCsv() {
        window.open(
          urls['kolibri:kolibri.plugins.facility:download_csv_file'](
            'user',
            this.$store.getters.activeFacilityId,
          ),
          '_blank',
        );
      },
    },
    $trs: {
      generateCSV: {
        message: 'Generate user CSV file',
        context:
          "Option to generate a CSV file containing user information and the classes they're associated with.",
      },
      regenerateCSV: {
        message: 'Generate new user CSV file',
        context:
          "Option to generate a new CSV file containing user information and the classes they're associated with.\n",
      },
      sectionTitle: {
        message: 'Import and export users',
        context: 'Title for section about managing external spreadsheets.\n',
      },
      sectionDescription: {
        message: 'You can manage, import and export many users and classes at once:',
        context: 'Additional information about managing spreadsheets.\n',
      },
      exportCSV: {
        message:
          'Export a CSV file which contains all users, and the classes that they are associated with',
        context: 'Additional information about managing the export of spreadsheets.\n',
      },
      editCSV: {
        message: 'Edit user info using an external spreadsheet program',
        context: 'Additional information about managing external spreadsheets.',
      },
      importCSV: {
        message: 'Import a CSV file to create and update users',
        context: 'Additional information about importing external spreadsheets.\n',
      },
      downloadCSV: {
        message: 'Download CSV',
        context: 'Button used to export spreadsheets from Kolibri.',
      },
      import: {
        message: 'Import',
        context: 'Button used to import spreadsheets from Kolibri.\n',
      },
      generatingCSV: {
        message: 'Generating CSV...',
        context:
          'Refers to when a CSV is being generated. During the export process this texts displays to indicate that the CSV file is being generated by Kolibri.',
      },
      viewFormat: {
        message: 'View spreadsheet format reference',
        context: 'Text link to the spreadsheet format reference document.',
      },
    },
  };

</script>


<style lang="scss" scoped></style>
